<template>
  <div>
    <a-divider style="font-weight: 700;" orientation="left">会员信息</a-divider>
    <a-form ref="formRef" :model="form.formAllclinent" :labelCol="{ span: 1, offset: 1 }"
      :wrapperCol="{ span: 7, offset: 0 }" :rules="rules">

      <a-form-item ref="username" label="用户名" name="username">
        <a-input v-model:value="form.formAllclinent.username" placeholder="请输入" />
      </a-form-item>

      <a-form-item ref="memberContactWay" label="手机号" name="memberContactWay">
        <a-input v-model:value="form.formAllclinent.memberContactWay" placeholder="请输入" />
      </a-form-item>

      <a-form-item ref="password" label="密码" name="password">
        <a-input v-model:value="form.formAllclinent.password" placeholder="请输入" />
      </a-form-item>

      <a-form-item label="所属销售">
        <a-radio-group v-model:value="form.formAllclinent.involvedMarket">
          <a-radio value="1">我的客户</a-radio>
          <a-radio value="2">公共客户</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-divider style="font-weight: 700;" orientation="left">企业信息</a-divider>
      <a-form-item ref="enterpriseName" label="公司名称" name="enterpriseName">
        <a-input v-model:value="form.formAllclinent.enterpriseName" placeholder="请输入" />
      </a-form-item>

      <a-form-item ref="enterpriseAbbreviation" label="公司简称" name="enterpriseAbbreviation">
        <a-input v-model:value="form.formAllclinent.enterpriseAbbreviation" placeholder="请输入" />
      </a-form-item>

      <a-form-item label="认证状态">
        <a-radio-group v-model:value="form.formAllclinent.authenticationStatus">
          <a-radio value="1">带审核</a-radio>
          <a-radio value="2">已认证</a-radio>
          <a-radio value="3">未通过</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="logo" style="display: flex">
        <a-upload v-model:file-list="form.formAllclinent.logo" name="avatar" list-type="picture-card"
          :show-upload-list="false" action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          :before-upload="beforeUpload" @change="handleChange">
          <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
          <div v-else>
            <loading-outlined v-if="loading"></loading-outlined>
            <plus-outlined v-else></plus-outlined>
            <div class="ant-upload-text">
              <PlusCircleOutlined style="color: #8c939d; fontSize: 4rem" />
            </div>
          </div>
        </a-upload>
        <div>建议上传120*120的图片</div>
      </a-form-item>

      <a-form-item label="公司性质" name="enterpriseNature">
        <a-select placeholder="请选择" v-model:value="form.formAllclinent.enterpriseNature">
          <a-select-option value="国企">国企</a-select-option>
          <a-select-option value="民营">民营</a-select-option>
          <a-select-option value="合资">合资</a-select-option>
          <a-select-option value="外商独资">外商独资</a-select-option>
          <a-select-option value="股份制企业">股份制企业</a-select-option>
          <a-select-option value="上市公司">上市公司</a-select-option>
          <a-select-option value="国家机关">国家机关</a-select-option>
          <a-select-option value="事业单位">事业单位</a-select-option>
          <a-select-option value="其他">其他</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="公司规格" name="CompanySpecification">
        <a-select placeholder="请选择" v-model:value="form.formAllclinent.CompanySpecification">
          <a-select-option value="20人以下">20人以下</a-select-option>
          <a-select-option value="20-99人">20-99人</a-select-option>
          <a-select-option value="100-499人">100-499人</a-select-option>
          <a-select-option value="500-999人">500-999人</a-select-option>
          <a-select-option value="1000-9999人">1000-9999人</a-select-option>
          <a-select-option value="10000人以上">10000人以上</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="所属行业" name="industryInvolved">
        <a-select placeholder="请选择" v-model:value="form.formAllclinent.industryInvolved">
          <a-select-option value="计算机软件/硬件">计算机软件/硬件</a-select-option>
          <a-select-option value="计算机系统/维修">计算机系统/维修</a-select-option>
          <a-select-option value="通信(设备/运营/服务)">通信(设备/运营/服务)</a-select-option>
          <a-select-option value="互联网/电子商务">互联网/电子商务</a-select-option>
          <a-select-option value="网络游戏">网络游戏</a-select-option>
          <a-select-option value="电子/半导体/集成电路">电子/半导体/集成电路</a-select-option>
          <a-select-option value="仪器仪表/工业自动化">仪器仪表/工业自动化</a-select-option>
          <a-select-option value="会计/审计">会计/审计</a-select-option>
          <a-select-option value="金融(投资/证券)">金融(投资/证券)</a-select-option>
          <a-select-option value="金融(银行/保险)">金融(银行/保险)</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="注册资金" name="registeredFund">
        <a-input v-model:value="form.formAllclinent.registeredFund" placeholder="请输入">
          <template #addonAfter>
            <a-select style="width: 120px" placeholder="万人民币">
              <a-select-option value="万人民币">万人民币</a-select-option>
              <a-select-option value="万美元">万美元</a-select-option>
            </a-select>
          </template>
        </a-input>
      </a-form-item>

      <a-form-item ref="companyURL" label="公司网址" name="companyURL">
        <a-input v-model:value="form.formAllclinent.companyURL" placeholder="请输入" />
      </a-form-item>

      <a-form-item ref="enterpriseWelfare" label="企业福利" name="enterpriseWelfare">
        <a-select v-model:value="form.formAllclinent.enterpriseWelfare" :options="options" mode="multiple"
          style="width: 100%" placeholder="请选择(可多选)" />
      </a-form-item>

      <a-form-item label="所在地区" name="location">
        <al-cascader placeholder="请选择" v-model:value="form.formAllclinent.location" level="3" data-type="all" />
      </a-form-item>

      <a-form-item ref="ContactAddress" label="联系地址" name="ContactAddress">
        <a-input v-model:value="form.formAllclinent.ContactAddress" placeholder="请输入" />
      </a-form-item>

      <a-form-item ref="companyBrief" label="公司简介" name="companyBrief">
        <a-input v-model:value="form.formAllclinent.companyBrief" placeholder="请输入" />
      </a-form-item>

      <a-form-item label="公司介绍" name="companyIntroduce">
        <a-textarea :rows="4" v-model:value="form.formAllclinent.companyIntroduce" placeholder="请输入" />
      </a-form-item>

      <a-divider style="font-weight: 700;" orientation="left">联系信息</a-divider>

      <a-form-item ref="contacts" label="联系人" name="contacts">
        <a-input v-model:value="form.formAllclinent.contacts" placeholder="请输入" />
      </a-form-item>

      <a-form-item ref="enterpriseContactWay" label="联系手机" name="enterpriseContactWay">
        <a-input v-model:value="form.formAllclinent.enterpriseContactWay" placeholder="请输入" />
      </a-form-item>

      <a-form-item ref="bindingWechat" label="联系微信" name="bindingWechat">
        <a-input v-model:value="form.formAllclinent.bindingWechat" placeholder="请输入" />
      </a-form-item>

      <a-form-item ref="relationTelephone" label="联系固话" name="relationTelephone">
        <a-input v-model:value="form.formAllclinent.relationTelephone" placeholder="请输入" />
      </a-form-item>

      <a-form-item ref="relationEmail" label="联系邮箱" name="relationEmail">
        <a-input v-model:value="form.formAllclinent.relationEmail" placeholder="请输入" />
      </a-form-item>

      <a-form-item ref="relationQQ" label="联系QQ" name="relationQQ">
        <a-input v-model:value="form.formAllclinent.relationQQ" placeholder="请输入" />
      </a-form-item>

      <a-divider style="font-weight: 700;" orientation="left">联系信息</a-divider>

      <a-form-item ref="presentIntegral" label="赠送积分" name="presentIntegral">
        <a-input v-model:value="form.formAllclinent.presentIntegral" />
      </a-form-item>

      <a-form-item label="赠送套餐" :wrapper-col="{ span: 10, offset: 0 }">
        <a-radio-group v-model:value="form.formAllclinent.enterpriseSetmeal">
          <a-radio value="1">云企测试套餐</a-radio>
          <a-radio value="2">半年会员</a-radio>
          <a-radio value="3">免费会员</a-radio>
          <a-radio value="4">月度会员</a-radio>
          <a-radio value="5">季度会员</a-radio>
          <a-radio value="6">年度会员</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item ref="chargeAmount" label="收费金额" name="chargeAmount">
        <a-input v-model:value="form.formAllclinent.chargeAmount" />
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 5, offset: 2 }">
        <a-button style="width: 110px;" type="primary" @click="onSubmit">保存</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import AlCascader from "@/components/AlCascader/al-cascader.vue"
import { PlusCircleOutlined } from "@ant-design/icons-vue";
const loading = ref<boolean>(false);
const imageUrl = ref<string>('');
const formRef = ref()
const fileList = ref([]);
const options: { value: string; }[] = [
  { value: "环境好" },
  { value: "年终奖" },
  { value: "双休" },
  { value: "五险一金" },
  { value: "加班费" },
  { value: "朝九晚五" },
  { value: "交通方便" },
  { value: "加班补助" },
  { value: "包食宿" },
  { value: "管理规范" },
  { value: "有提成" },
  { value: "全勤奖" },
  { value: "有年假" },
  { value: "专车接送" },
  { value: "有补助" },
  { value: "晋升快" },
  { value: "车贴" },
  { value: "房贴" },
  { value: "压力小" },
  { value: "技术培训" },
  { value: "旅游" },
];
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, message: '请输入最少5个字符', trigger: 'blur' },
  ],
  memberContactWay: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { min: 5, message: '请输入11为标准手机号', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  enterpriseName: [
    { required: true, message: '请输入公司名称', trigger: 'blur' },
  ],
  enterpriseAbbreviation: [
    { required: true, message: '请输入公司简称', trigger: 'blur' },
  ],
  logo: [
    { required: true, message: '请上传logo', trigger: 'blur' },
  ],
  enterpriseNature: [
    { required: true, message: '请选择公司性质', trigger: 'blur' },
  ],
  CompanySpecification: [
    { required: true, message: '请上传公司规格', trigger: 'blur' },
  ],
  industryInvolved: [
    { required: true, message: '请上传所属行业', trigger: 'blur' },
  ],
  location: [
    { required: true, message: '请选择所在地区', trigger: 'blur' },
  ],
  ContactAddress: [
    { required: true, message: '请输入联系地址', trigger: 'blur' },
  ],
  contacts: [
    { required: true, message: '请输入联系人', trigger: 'blur' },
  ],
  enterpriseContactWay: [
    { required: true, message: '请输入联系手机', trigger: 'blur' },
  ]
};
const form = reactive({
  formAllclinent: {
    username: "", // 用户名
    password: "", // 密码
    logo: [], // logo图片
    enterpriseAbbreviation: "", // 企业简称
    enterpriseNature: undefined, // 企业性质
    enterpriseShort: "", // 企业名称
    CompanySpecification: undefined, // 公司规格
    registeredFund: "", // 注册资金
    relationTelephone: "", // 联系固话
    relationEmail: "", // 联系邮箱
    relationQQ: "", // 联系QQ
    presentIntegral: 0, // 赠送积分
    chargeAmount: 0, // 收费金额
    companyURL: "", // 公司网址
    companyBrief: "", // 公司简介
    companyIntroduce: "", // 公司介绍
    enterpriseWelfare: [], // 企业福利
    ContactAddress: "", // 联系地址
    enterpriseName: "", // 企业名称
    industryInvolved: undefined, // 所属行业
    location: [], // 所在地区
    bindingWechat: "", // 绑定微信
    clientGrade: "", // 客户等级
    contacts: "", // 联系人
    enterpriseContactWay: "", // 企业联系方式
    memberContactWay: "", // 会员联系方式 | 添加页面手机号
    position: "", // 在招职位
    receiptNotification: "", // 收到简历
    enterpriseSetmeal: "3", // 企业套餐
    setmealResidue: "", // 套装剩余
    refreshTime: "", // 刷新时间
    registrationTime: "", // 注册时间
    loginTime: "", // 登陆时间
    involvedMarket: "1", // 所属销售
    authenticationStatus: "1", // 认证状态
    displayStatus: "", // 显示状态
    finallyFollowup: "", // 最后跟进
    notFollowup: "", // 未跟进
  },
});

function getBase64(img: Blob, callback: (base64Url: string) => void) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result as string));
  reader.readAsDataURL(img);
}

const handleChange = (info: any) => {
  if (info.file.status === 'uploading') {
    loading.value = true;
    return;
  }
  if (info.file.status === 'done') {
    // Get this url from response in real world.
    getBase64(info.file.originFileObj, (base64Url: string) => {
      imageUrl.value = base64Url;
      loading.value = false;
    });
  }
  if (info.file.status === 'error') {
    loading.value = false;
  }
};

const beforeUpload = (file: any) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
  }
  return isJpgOrPng && isLt2M;
};

const onSubmit = () => {
  formRef.value.validate().then(() => {
    console.log(1111);
  })
}

</script>

<style scoped>

</style>